const vueDrag = {}
vueDrag.install = function (Vue, options) {
  Vue.directive('drag', {
    inserted (el) {
      el.addEventListener('mousedown', function (e) {
        el.selected = true
        el.lastX = e.pageX
        el.lastY = e.pageY
        el.translateX = el.translateX || 0
        el.translateY = el.translateY || 0
      })
      el.parentNode.addEventListener('mousemove', function (e) {
        if (el.selected) {
          el.translateX = el.translateX + e.pageX - el.lastX
          el.translateY = el.translateY + e.pageY - el.lastY
          el.style.transform = `translate(${el.translateX}px,${el.translateY}px)`
          el.lastX = e.pageX
          el.lastY = e.pageY
        }
      })
      el.parentNode.addEventListener('mouseup', function (e) {
        el.selected = false
      })
    }
  })
}
export default vueDrag